<template>
    <div id="app">
        <Menu></Menu>
        <transition :name="transitionName">
            <router-view class="child-view"></router-view>
        </transition>

    </div>
</template>

<script>
    import Menu from './components/menu'

    export default {
        data(){
            return {
                transitionName:'slide-left'
            }
        },
        components: {
            Menu
        },
        watch: {
            '$route' (to, from) {
                const toDepth = to.path.split('/').length
                const fromDepth = from.path.split('/').length
                this.transitionName = toDepth < fromDepth ? 'slide-right' : 'slide-left'
            }
        }
    }
</script>

<style>
    * {
        padding: 0;
        margin: 0;
    }

    #app {
        font-family: 'Avenir', Helvetica, Arial, sans-serif;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        text-align: center;
        color: #2c3e50;
        margin-top: 60px;
    }

    .child-view {
        position: absolute;
        top: 61px;
        left: 0;
        width: 100%;
        height: 100%;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
        transition: all 1s cubic-bezier(.55,0,.1,1);
    }
    .slide-left-enter, .slide-right-leave-active {
        opacity: 0;
        transform: translate(-80px, 0);
    }
    .slide-left-leave-active, .slide-right-enter {
        opacity: 0;
        transform: translate(100%, 0);
    }
    /*::-webkit-scrollbar {*/
        /*display: none;*/
    /*}*/
</style>
